<style>
	/*apply-page*/
	.apply-page .rwrap { margin-left: 0; margin-right: 0; }
</style>

<template>
	<view class="apply-page">
		<an-nav-bar :title="accountType == 1?'技师入驻':'商家入驻'">
			<template :slot="'right'">
				<view style="color: #fff;" @click="$refs.refEntryNotice.open()">入驻须知</view>
			</template>
		</an-nav-bar>

		<uni-notice-bar v-if="editFormValue.status == 0" text="审核中" style="text-align: center;" />
		<uni-notice-bar v-if="editFormValue.status == 1" text="审核通过,请登录【技师端】完善信息" @click="goDownload()" style="text-align: center;" color="#0ed35d" background-color="#e7fbef" />
		<uni-notice-bar v-if="editFormValue.status == 2" :text="'审核未通过：'+editFormValue.remark" />

		<view v-if="accountType == 1" class="apply-uppic">
			<view class="rwrap">
				<view class="apply-uppic_title">
					<text class="_span">上传相册</text>
					<text class="_p">至少3张以上本人生活照</text>
				</view>
				<view class="apply-uppic_picture">
					<block v-for="(image,iindex) in editFormValue.recentPhotoDisplay" :key="iindex">
						<view class="cell" @click="$common.previewImage(editFormValue.recentPhotoDisplay,iindex)">
							<view class="_delete" @click.stop="doDelete(editFormValue.recentPhotoDisplay,iindex)">
								<uni-icons type="clear" size="28" color="#F56C6C"></uni-icons>
							</view>
							<image class="image" mode="aspectFill" :src="$common.binImage(image)"></image>
						</view>
					</block>

					<view class="cell" @click="uploadField='recentPhotoDisplay';$refs.refUploadImage.init();">
						<image class="image" mode="aspectFill" src="/static/image/plus.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="accountType == 2" class="apply-uppic">
			<view class="rwrap">
				<view class="apply-uppic_title">
					<text class="_span">上传营业执照</text>
					<text class="_p">请上传营业执照正反面</text>
				</view>
				<view class="apply-uppic_picture">
					<block v-for="(image,iindex) in editFormValue.licenseImgDisplay" :key="iindex">
						<view class="cell" @click="$common.previewImage(editFormValue.licenseImgDisplay,iindex)">
							<view class="_delete" @click.stop="doDelete(editFormValue.licenseImgDisplay,iindex)">
								<uni-icons type="clear" size="28" color="#F56C6C"></uni-icons>
							</view>
							<image class="image" mode="aspectFill" :src="$common.binImage(image)"></image>
						</view>
					</block>

					<view class="cell" @click="uploadField='licenseImgDisplay';$refs.refUploadImage.init();">
						<image class="image" mode="aspectFill" src="/static/image/plus.png"></image>
					</view>
				</view>
			</view>
		</view>

		<view v-if="accountType == 1" class="field-list">
			<view class="rwrap">
				<view class="cell">
					<view class="_lable _required">入驻岗位</view>
					<view class="_value _arrow" @click="pickerField='jobTitle';pickerMax=1;pickerSelected=[],$refs.popupPicker.open();">
						<input class="__input" v-model="editFormValue.jobTitle" disabled placeholder="请选择" />
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">头像</view>
					<view class="_value _supload">
						<image class="__image" mode="aspectFill" :src="$common.binImage(editFormValue.headImg,'','','/static/image/plus.png')" @click="uploadField='headImg';$refs.refUploadImage.init({canvas:1, width:300, height:300});"></image>
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">昵称</view>
					<view class="_value">
						<input class="__input" v-model="editFormValue.nickName" placeholder="请输入" />
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">性别</view>
					<view class="_value _arrow" @click="pickerField='sex';pickerMax=1;pickerSelected=[],$refs.popupPicker.open();">
						<input class="__input" v-model="editFormValue.sex" disabled placeholder="请输入" />
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">微信号</view>
					<view class="_value">
						<input class="__input" v-model="editFormValue.wecatAccount" placeholder="请输入" />
					</view>
				</view>
				<view class="cell" @click="chooseLocation">
					<view class="_lable _required">所在区域</view>
					<view class="_value _arrow">
						<input class="__input" v-model="editFormValue.address" disabled placeholder="请选择" />
					</view>
				</view>
				<view v-if="editFormValue.status != 0" class="cell" @click="$common.goPage('/pages/s/auth/realname')">
					<view class="_lable _required">实名认证</view>
					<view class="_value _arrow">
						<text class="__text">{{editFormValue.isAuth?'已认证':'未认证'}}</text>
					</view>
				</view>
			</view>

			<view class="rwrap">
				<view class="cell">
					<view class="_lable _required">兴趣爱好</view>
					<view class="_value _arrow" @click="pickerField='hobbies';pickerMax=6;pickerSelected=[],$refs.popupPicker.open();">
						<input class="__input" v-model="editFormValue.hobbies" disabled placeholder="请选择" />
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">个性标签</view>
					<view class="_value _arrow" @click="pickerField='personLabel';pickerMax=6;pickerSelected=[],$refs.popupPicker.open();">
						<input class="__input" v-model="editFormValue.personLabel" disabled placeholder="请选择" />
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">个人介绍</view>
					<view style="margin-bottom: 30rpx; padding: 0 10rpx; width: 100%; border: 1rpx solid #E4E4E4; border-radius: 10rpx;">
						<textarea class="__textarea" v-model="editFormValue.selfIntroduction" placeholder="请输入" :maxlength="200"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view v-if="accountType == 2" class="field-list">
			<view class="rwrap">
				<view v-if="editFormValue.status != 0" class="cell" @click="$common.goPage('/pages/s/auth/realname')">
					<view class="_lable _required">实名认证</view>
					<view class="_value _arrow">
						<text class="__text">{{editFormValue.isAuth?'已认证':'未认证'}}</text>
					</view>
				</view>
				<view class="cell" @click="chooseLocation">
					<view class="_lable _required">所在区域</view>
					<view class="_value _arrow">
						<input class="__input" v-model="editFormValue.address" disabled placeholder="请选择" />
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">门店介绍</view>
					<view style="margin-bottom: 30rpx; padding: 0 10rpx; width: 100%; border: 1rpx solid #E4E4E4; border-radius: 10rpx;">
						<textarea class="__textarea" v-model="editFormValue.selfIntroduction" placeholder="请输入" :maxlength="200"></textarea>
					</view>
				</view>
			</view>
		</view>

		<view style="padding: 32rpx;">
			<template v-if="editFormValue.status != 0 && editFormValue.status != 1">
				<button class="theme-btn" :disabled="editBtnDisabled" @click="editFormSubmit">提交审核</button>
			</template>

			<view @click="goDownload" class="theme-btn2" style="margin-top: 32rpx;">
				下载技师端
			</view>
		</view>

		<!-- 组件 -->
		<EntryNotice ref="refEntryNotice" />
		<UploadImage ref="refUploadImage" @sync="syncUploadImage" />

		<!-- 选择 -->
		<uni-popup type="bottom" ref="popupPicker">
			<view style="width: 100%; max-height: 800rpx; overflow: hidden; overflow-y: auto;">
				<view v-if="pickerList[pickerField] && pickerList[pickerField].length" class="field-list">
					<block v-for="(item,sindex) in pickerList[pickerField]" :key="sindex">
						<view class="cell" @click="doPicker(item,sindex)">
							<view class="_lable">{{item}}</view>
							<view class="_value">
								<view v-if="pickerMax==1" class="__text">
									<uni-icons type="right" size="20"></uni-icons>
								</view>
								<view v-if="pickerMax!=1 && checkPicker(item)" class="__text">
									<uni-icons type="checkmarkempty" size="20"></uni-icons>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import indexConfig from '@/config/index.config'
	import {
		readRequest,
	} from "@/api/apply"
	import {
		createRequest,
		updateRequest,
	} from "@/api/technician"
	import {
		tTagsRequest,
		tHobbyRequest,
	} from "@/api/common"
	import {
		itudeRequest,
	} from "@/api/location"

	import EntryNotice from "./components/entryNotice"
	import UploadImage from "@/components/upload/image"

	export default {
		components: {
			EntryNotice,
			UploadImage,
		},
		data() {
			return {
				accountType: 1,

				uploadField: '',

				pickerField: '',
				pickerMax: 1,
				pickerSelected: [],
				pickerList: {
					jobTitle: ['按摩', '健身'],
					sex: ['男', '女'],
					personLabel: [],
					hobbies: [],
				},

				editBtnDisabled: false,
				editFormValue: {
					recentPhotoDisplay: [],
					licenseImgDisplay: [],
				},
				editFormRuleField: ["recentPhotoDisplay", "jobTitle", "headImg", "nickName", "sex", "wecatAccount", "address", "hobbies", "personLabel", "selfIntroduction", ],
				editFormRuleField2: ["licenseImgDisplay", "address", "selfIntroduction", ],
				editFormRule: {},
			}
		},
		onLoad(options) {
			if (options.accountType) {
				this.accountType = options.accountType
			}

			this.getUser()

			tTagsRequest().then(res => {
				if (res && res.data) {
					this.pickerList.personLabel = res.data.split(',')
				}
			})
			tHobbyRequest().then(res => {
				if (res && res.data) {
					this.pickerList.hobbies = res.data.split(',')
				}
			})
		},
		onShow() {

		},
		methods: {
			getUser() {
				this.userInfo = this.$mStore.state.userInfo
				readRequest({
					mobile: this.userInfo.mobile,
					accountType: this.accountType
				}).then(res => {
					if (res && res.data) {
						res.data.recentPhotoDisplay = res.data.recentPhoto ? res.data.recentPhoto.split(',') : []
						res.data.licenseImgDisplay = res.data.licenseImg ? res.data.licenseImg.split(',') : []

						this.editFormValue = res.data
					} else {
						this.editFormValue.mobile = this.userInfo.mobile
						this.editFormValue.nickName = this.userInfo.nickName
						this.editFormValue.wecatAccount = this.userInfo.wecatAccount
					}
				})
			},
			doDelete(items, index) {
				if (!items || !items.length) {
					return
				}
				items.splice(index, 1)
			},
			doPicker(item, index) {
				if (this.pickerMax == 1) {
					this.$set(this.editFormValue, this.pickerField, item)
					this.$refs.popupPicker.close()
					return
				}

				if (!this.pickerSelected.length) {
					this.pickerSelected.push(item)
				} else {
					let findIndex = this.pickerSelected.findIndex(val => val == item)
					if (findIndex != -1) {
						this.pickerSelected.splice(findIndex, 1)
					} else {
						if (this.pickerSelected.length >= this.pickerMax) {
							this.$common.toast('最多选择' + this.pickerMax + '个标签')
						} else {
							this.pickerSelected.push(item)
						}
					}
				}

				this.$set(this.editFormValue, this.pickerField, this.pickerSelected.join(','))
			},
			checkPicker(item) {
				let one = this.pickerSelected.find(val => val == item)
				return one ? true : false
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (loca) => {
						itudeRequest({
							longitude: loca.longitude,
							latitude: loca.latitude,
						}).then(res => {
							if (!res || !res.data) {
								return
							}

							let data = JSON.parse(res.data)
							let address = data.result.address_component
							this.$set(this.editFormValue, 'longitude', loca.longitude)
							this.$set(this.editFormValue, 'latitude', loca.latitude)
							this.$set(this.editFormValue, 'province', address.province)
							this.$set(this.editFormValue, 'city', address.city)
							this.$set(this.editFormValue, 'district', address.district)
							this.$set(this.editFormValue, 'street', address.street)
							this.$set(this.editFormValue, 'address', address.street_number)
						})
					}
				})
			},
			editFormSubmit() {
				let ruleField = this.accountType == 2 ? this.editFormRuleField2 : this.editFormRuleField
				let valid = this.$common.validate(this.editFormValue, ruleField)
				if (!valid) {
					this.$common.toast('请填写带*必填项')
					return false
				}

				// bin
				this.editFormValue.accountType = this.accountType
				this.editFormValue.recentPhoto = this.editFormValue.recentPhotoDisplay.join(',')
				this.editFormValue.licenseImg = this.editFormValue.licenseImgDisplay.join(',')

				this.editBtnDisabled = true
				if (this.editFormValue.id) {
					this.editFormValue.status = 0
					updateRequest(this.editFormValue, true).then(res => {
						this.editFormValue = {}
						this.$common.toast('提交成功')
						uni.navigateBack()
					})
				} else {
					createRequest(this.editFormValue, true).then(res => {
						this.editFormValue = {}
						this.$common.toast('提交成功')
						uni.navigateBack()
					})
				}
				setTimeout(() => {
					this.editBtnDisabled = false
				}, 2000)
			},
			syncUploadImage(url) {
				if (this.uploadField == 'headImg') {
					this.$set(this.editFormValue, this.uploadField, url)
					return
				}
				this.editFormValue[this.uploadField].push(url)
			},
			goDownload() {
				//#ifdef H5
				location.href = indexConfig.hostJsUrl + '/dl/';
				//#endif

				//#ifdef APP-PLUS
				plus.runtime.openURL(indexConfig.hostJsUrl + '/dl/');
				//#endif
			},
		},
	}
</script>
